<template>
    <div>
        <!-- header头部 -->
        <Logo />
        <div class = "contend">
            <!-- Url地址 -->
            <p class = "addressUrl orHeader">
                <span>Url地址：</span>
                <input type="text" v-model = "addressUrl" style = "width:590px;">
                <span class = "copy" @click = "copy(index)">复制</span>
            </p>
            <!-- 学校和销售人员填写 -->
            <div class = "essentialInformation">
                <!-- 学校 -->
                <p class = "school orHeader">
                    <span>学校   ：</span>
                    <input type="text"  style = "width:240px;">
                </p>
                <!-- 销售人员 -->
                <p class = "sale orHeader">
                    <span>销售人员   ：</span>
                    <el-select v-model="value" filterable placeholder="请选择" style = "width:170px;">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </p>
            </div>
            <!-- 大数据教学平台 -->
            <div class = "teaching-platform platformOr" style = "position:relative;top:15px;">
                <p class = "title">
                    <span class = "category">教学</span>
                    <span class = "addAccount" @click = "teachingAddAccount()">添加账号</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in teachingAddAccounts" :key = "index" style = " width: 560px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <input type="text" v-model = "item.number">
                            </p>
                            <p class = "role">
                                <span>角色   ：</span>
                                <el-radio v-model="item.radio" label="1">教师</el-radio>
                                <el-radio v-model="item.radio" label="2">学生</el-radio>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 大数据实训平台 -->
            <div class = "training-platform platformOr" style = "position:relative;top:30px;">
                <p class = "title">
                    <span class = "category">实训</span>
                    <span class = "addAccount" @click = "trainingAddAccount()">添加账号</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in trainingAddAccounts" :key = "index" style = " width: 560px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <input type="text" v-model = "item.number">
                            </p>
                            <p class = "role">
                                <span>角色   ：</span>
                                <el-radio v-model="item.radio" label="1">教师</el-radio>
                                <el-radio v-model="item.radio" label="2">学生</el-radio>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 大数据科研平台 -->
            <div class = "scientific-research-platform platformOr" style = "position:relative;top:45px;">
                <p class = "title">
                    <span class = "category">科研</span>
                    <span class = "addAccount" @click = "scientificAddAccount()">添加账号</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in scientificAddAccounts" :key = "index" style = " width: 251px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <input type="text" v-model = "item.number">
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 数据管理系统 -->
            <div class = "data-management platformOr"  style = "position:relative;top:60px;">
                <p class = "title">
                    <span class = "category">数据</span>
                    <span class = "addAccount" @click = "managementAddAccount()">添加账号</span>
                </p>
                <div class = "accountOrRole Last">
                    <ul>
                        <li v-for = "(item,index) in managementAddAccounts" :key = "index" style = " width: 251px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <input type="text" v-model = "item.number">
                            </p>
                        </li>
                    </ul>
                </div>
                <!-- 保存按钮 -->
                <p class = "Preservation" @click = "Preservation()">确定</p>
            </div>
        </div>
    </div>
</template>
<script>
import Logo from "../../components/Logo"
export default {
    components:{
        Logo,
    },
    data () {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '选项1',
            radio: '1',
            addressUrl:'',
            fillInQuestion:[],
            // 大数据实训平台添加账号
            teachingAddAccounts:[
                {
                    radio:'',
                    number:'',
                }
            ],
            trainingAddAccounts:[
                {
                    radio:'',
                    number:'',
                }
            ],
            scientificAddAccounts:[
                {
                    number:'',
                }
            ],
            managementAddAccounts:[
                {
                    number:'',
                }
            ],
        }
    },
    methods:{
        // 点击复制Url
        copy(){
            this.value = this.addressUrl
            console.log(this.addressUrl)
            const input = document.createElement('input');  // 这里的逻辑就是新建立一个input标签，
            document.body.appendChild(input); // 把input添加到body中
            input.setAttribute('value',this.value); // 设置input的value值，this.hd3href
            input.select();  									// select 选中input里面的所有文本内容
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({  								  // 提示消息
                message: "复制成功",
                type: 'success'
            });
            document.body.removeChild(input);   // 最近需要销毁
        },
        // 大数据教学平台添加账号
        teachingAddAccount(){
            let Arr = {
                radio:'',
                number:'',
            }
            this.teachingAddAccounts.push(Arr)
        },
        // 大数据实训平台添加账号
        trainingAddAccount(){
            let Arr = {
                radio:'',
                number:'',
            }
            this.trainingAddAccounts.push(Arr)
        },
        // 大数据科研平台添加账号
        scientificAddAccount(){
            let Arr = {
                number:'',
            }
            this.scientificAddAccounts.push(Arr)
        },
        // 数据管理系统添加账号
        managementAddAccount(){
            let Arr = {
                number:'',
            }
            this.managementAddAccounts.push(Arr)
        },
        // 点击保存
        Preservation(){
            let self = this;
            self.$router.push({
                path: '/',
                // query: {
                    // uuid: self.uuid
                // }
            })
        }
    }

}
</script>

<style lang = "scss" scoped>
    .contend{
        width: 1200px;
        position: relative;
        margin: 0 auto;
        color: #333333;
    }
    .addressUrl{
        width: 100%;
        height: 40px;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .orHeader{
        position: relative;
        margin-left: 33px;
        span{
            font-size:16px;
        }
        .copy{
            font-size: 14px;
            color: #409eff;
            border: 1px solid #b3d8ff;
            background: #ecf5ff;
            border-radius: 5px;
            margin-left: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        input{
            margin-left: 5px;
            font-size: 18px;
            position: relative;
            padding: 9px 0px 9px 11px;
            margin-left: 9px;
            border: 1px solid #d7d7d7;
            border-radius: 5px;
            z-index: 10;
        }
    }
    .essentialInformation{
        width: 100%;
        height: 40px;
        position: relative;
        margin-bottom: 28px;
        p{
            float: left;
            position: relative;

        }
        .sale{
            margin-left: 100px;
        }

    }
    .platformOr{
        clear: both;
        .title{
            position: relative;
            margin-left:33px;
            margin-bottom: 27px;
            .category{
                font-size: 18px;
                font-weight: bold;
            }
            .addAccount{
                font-size: 14px;
                color: #409eff;
                border: 1px solid #b3d8ff;
                border-radius: 5px;
                background: #ecf5ff;
                padding: 5px 11.5px;
                margin-left: 25px;
                cursor: pointer;
            }
        }
        .accountOrRole{
            position: relative;
            li{

                height: 40px;
                position: relative;
                margin-left: 33px;
                margin-bottom:27px;
                float: left;
            }
            .accountNumber{
                float: left;
                input{
                    width: 160px;
                    font-size: 18px;
                    position: relative;
                    padding: 9px 0px 9px 11px;
                    border: 1px solid #d7d7d7;
                    margin-left: 9px;
                    border-radius: 5px;
                    z-index: 10;
                }
            }
            .role{
                position: relative;
                margin-left: 30px;
                float: left;
                line-height: 40px;
            }
        }
        .Last{
            p:last-child{
                position:relative;
                margin-bottom: 100px;
            }
        }
    }
    .Preservation{
        width: 150px;
        height: 40px;
        color: #fff;
        background: #387ee8;
        clear: both;
        position: relative;
        margin: 100px auto;
        top: 20px;
        text-align: center;
        line-height: 40px;
        border-radius: 10px;
        cursor: pointer;
        &:hover{
            background: #0161f1;
        }
    }
</style>
<style lang="scss">
    // 角色选项样式
    .accountOrRole{
        .el-radio__inner{
            border: 1px solid #333333;
        }
        .el-radio__label{
            font-size: 16px;
            position: relative;
            top: 1px;
        }
    }
    // 销售人员选项
    .orHeader{
        .el-input--suffix .el-input__inner{
            margin-left: 9px;
        }
    }
</style>
